<!--
 * @Author: chenhuanhuan 2925102113@qq.com
 * @Date: 2024-12-12 14:13:45
 * @LastEditors: chenhuanhuan 2925102113@qq.com
 * @LastEditTime: 2025-03-24 10:45:28
 * @FilePath: \hbzc-groupmeal-center-web\src\centerViews\basicInformation\skuManage\skuCategory\index.vue
-->
<template>
  <div class="app-container ">
    <pb-card height="100%" width="100%" padding="0">
      <div class="content-box">

        <ContentOperation>
          <pb-button size="small" plain class="mr-6" @click="addModifFn" v-hasPerm="'center:spuCategory:add'">
            +添加
          </pb-button>
        </ContentOperation>
        <div class="table-box flex ">
          <div class="left-tree-box">
            <pb-tree :style="{ maxHeight: treeH }" @nodeClick="nodeClick" :treeData="skuTreeData"
              :defaultProps="treeProps"></pb-tree>
          </div>
          <div class="table-right">
            <pb-table :column="skuColumn" :tableData="skuTableData" :bottomElement="['pb-page']">
              <template #operate="{ row }">
                <div class="flex">
                  <div v-hasPerm="'center:spuCategory:edit'">
                    <pb-button size="small" text @click="editModifFn(row)">编辑</pb-button>
                    <p class="divider mr-2 ml-2"></p>
                  </div>
                  <PopconfirmButton @confirm="deleteFn(row)" v-hasPerm="'center:spuCategory:delete'"></PopconfirmButton>
                </div>
              </template>
            </pb-table>
            <pb-pagination v-model:currentPage="pages.currentPage" v-model:pageSize="pages.pageSize"
              @onChange="onPagesChange" :total="pages.total"></pb-pagination>
          </div>
        </div>
      </div>
    </pb-card>
    <addModifPop ref="popRef" @refresh="onInit"></addModifPop>
  </div>
</template>

<script setup lang="ts">
import addModifPop from "./components/addModifPop.vue";
import { createMessage } from "@/Public-UIlibrary/pb-message/method";
import { useRouter } from "vue-router";
import { getSkuClassList, delSkuClass } from "@/api/Sku";
import { getSkuClassTreeApi } from "@/utils/globalFn";
const router = useRouter();
const skuTreeData = ref([])
const skuTableData = ref([]);
const skuColumn = reactive([
  {
    key: "skuClassCode",
    align: 'right',
    name: "类别编码",
  },
  {
    key: "skuClassName",
    name: "类别名称",
  },
  // {
  //   key: "parentClassName",
  //   name: "父级类别",
  // },
  {
    key: "createTime",
    width: 120,
    align: 'right',
    name: "创建时间",
  },
  {
    key: "skuClassDesc",
    name: "备注",
  },
  {
    slot: "operate",
    name: "操作",
    width: 150,
    fixed: 'right'
  },
]);
const pageInit = () => ({
  total: 0,
  currentPage: 1,
  pageSize: 15,
});
const pages = ref(pageInit());
const onPagesChange = () => {
  getSkuClassListApi();
};


const deleteFn = (row) => {
  delSkuClass({ skuClassCode: row.skuClassCode }).then(res => {
    if (res.code == 2000) {
      createMessage({
        message: '删除成功'
      })
      getSkuClassListApi()
    }
  })
}


const popRef = ref(null);
// 选择节点
const parentClassCode = ref("");
const addModifFn = () => {
  popRef.value.showFn();
};

const editModifFn = (row) => {
  popRef.value.showFn(JSON.parse(JSON.stringify(row)));
};
const nodeClick = ({ curNode }) => {
  parentClassCode.value = curNode.skuClassCode
  getSkuClassListApi()
};
// 获取列表
const getSkuClassListApi = () => {
  return new Promise<void>((resolve, reject) => {
    let { currentPage, pageSize } = { ...pages.value };
    let params = {
      currentPage,
      pageSize,
      parentClassCode: parentClassCode.value,
    };
    getSkuClassList(params).then((res) => {
      if (res.code == 2000) {
        skuTableData.value = res.data.records;
        pages.value.total = res.data.total;
      }
    });
  });
};
const treeProps = { children: "children", label: "skuClassName" };

const onInit = () => {
  getSkuClassTreeApi().then(res => {
    skuTreeData.value = [
      {
        skuClassName: '全部',
        children: res
      }
    ];
    getSkuClassListApi();

    var height = document.getElementsByClassName("pb-table");
    treeH.value = height[0].offsetHeight + "px";

    window.addEventListener("resize", () => {
      height = document.getElementsByClassName("pb-table");
      treeH.value = height[0].offsetHeight + "px";
    });
  })
}

const treeH = ref(null);
onMounted(() => {
  onInit()

})
</script>

<style lang="scss" scoped>
.content-box {
  height: 100%;
  display: flex;
  flex-direction: column;
}

.table-box {
  flex: 1;
  overflow: hidden;

  .table-right {
    width: 84%;
    height: 100%;
    padding: 16px;
    box-sizing: border-box;
  }
}
</style>